<template>
  <view v-if="navTitled">
    <view class="navTitle-wrap" :style="{ height: global_top*2 + 88 + 'rpx', background: styleCustoms.backgroundColor, color: styleCustoms.color }">
            <view class="status-bar" :style="{ height: global_top*2 + 'rpx' }"></view>    
      <view class="nav-head" :style="{ top: global_top*2 + 'rpx' }">
        <image v-if="isReturn" src="../../static/return.png" @tap="goBack" class="nav-return-icon" mode=""></image>
        <slot v-if="isCustomIcon" name="icon"></slot>
        <view :class="isSelectIcon ? 'flex-center' : ''">
          <text class="nav-text text-overflow" :class="isSelectIcon ? 'mr8' : ''">{{title}}</text>
          <slot v-if="isSelectIcon" name="select"></slot>
        </view>
      </view>
    </view>
    <view v-if="isSeize" class="nav-seize" :style="{ height: global_top*2 + 88 + 'rpx' }"></view>
  </view>
</template>


<script>
export default {
  name: "NavTitle",
  props: {
    title: {
      type: String,
      default: ""
    },
    isSeize: {
      type: Boolean,
      default: true
    },
    isReturn: {
      type: Boolean,
      default: true
    },
    isCustomIcon: {
      type: Boolean,
      default: false
    },
    styleCustoms: {
      type: Object,
      default: () => ({
        color: 'red',
        backgroundColor: '#ffffff',
        goBackIcon: '../../static/return.png'
      })
    },
    isSelectIcon: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      global_top: 20,
      navTitled:true,
    };
  },
  mounted() {
    const that = this;
    uni.getSystemInfo({
      success(res) {
        const nav_top = res.statusBarHeight;
        that.global_top = nav_top;
      }
    });
  /*#ifdef MP*/
    if (typeof tt !== 'undefined') {
      // 抖音小程序的头部导航栏不能自自定义的
    this.navTitled = false;
    } else {
      this.navTitled = true;
    }
    /*#endif*/  
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1,
        success() {},
        fail() {
          uni.switchTab({
            url: '/pages/index/index'
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.navTitle-wrap {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 999;
  background: transparent;

  .status-bar {
    position: absolute;
    width: 100%;
    top: 0;
  }

  .nav-head {
    width: 100%;
    height: 88rpx;
    display: flex;
    justify-content: center;
    position: absolute;
    font-size: 32rpx;
    align-items: center;
    font-weight: 500;
  }

  .nav-return-icon {
    width: 48rpx;
    height: 48rpx;
    position: absolute;
    left: 24rpx;
    top: 20rpx;
    z-index: 999999999;
  }

  .nav-text {
    display: inline-block;
    max-width: 288rpx;
  }

  .text-overflow {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .mr8 {
    margin-right: 8rpx;
  }

  .flex-center {
    display: flex;
    align-items: center;
  }
}
</style>
